<script setup>

import VueEcharts from "vue-echarts";

const props = defineProps({
  data: { type: Array, default: () => [] },
})

const options = computed(() => {

  const data = props.data;

  const xAxisData = data.map((item)=>item.name);
  const valueData = data.map((item)=>item.value);
  return {
    tooltip: { trigger: 'item' },
    xAxis: { type: 'category', data: xAxisData },
    yAxis: [{ type: 'value' }, { type: 'value', position: 'right', axisLabel: { formatter: '{value}' } }],
    series: [{
      name: '资产种类分布',
      type: 'bar',
      data: valueData,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'top',
            formatter: '{c}',
            textStyle: { color: '#000', fontSize: 14 }
          }
        }
      }
    }]
  }
})

</script>

<template>
  <VueEcharts :option="options" style="height: 400px"></VueEcharts>
</template>

<style scoped lang="scss">

</style>